<template>
  <b-container fluid style="margin-top: 10%">
    <h1>用户留言</h1>
    <b-row class="my-1">
      <b-col sm="1"><label>你的大名:</label></b-col>
      <b-col sm="9">
        <b-form-input v-model="name"
                      type="text"
                      placeholder="请输入你的大名"></b-form-input>
      </b-col>
    </b-row>
    <b-row class="my-1">
      <b-col sm="3"><label>留言内容:</label></b-col>
      <b-col sm="9">
        <b-form-input v-model="inputText"
                      type="text"
                      placeholder="有什么想说的可以给我留言"></b-form-input>
      </b-col>
    </b-row>
    <div style="margin-top: 10% ">
      <b-btn variant="success" @click="comment">
        提交
      </b-btn>
    </div>

    <b-modal id='alertModal' hide-header-close ok-only ok-title='你没的选,只能点我' title="提交结果" v-model="modalShow">
      <p class="my-4" v-if="!modalTextShow ">行了, 提交成功了,反正我也不会看的!</p>
      <p class="my-4" v-if="modalTextShow">至少输入点内容吧</p>
    </b-modal>
  </b-container>
</template>

<script>
import axios from 'axios'

export default {
  name: 'userComment',
  data () {
    return {
      inputText: '',
      name: '',
      modalShow: false,
      modalTextShow: false
    }
  },
  methods: {
    comment: function () {
      let that = this
      if (that.inputText === '' || that.inputText.length === 0) {
        that.modalTextShow = true
      } else {
        that.modalTextShow = false

        axios.post('http://106.12.204.60/cheng/tigerComment', {
          comment: that.inputText,
          name: that.name
        }).then(function (response) {
          if (response.status !== 200) {
            alert('网络出错,请重试')
          }
        }).catch(function (error) {
          alert(error)
        })
      }
      this.modalShow = !this.modalShow
    }
  }
}
</script>

<style scoped>
.my-1 {
  text-align: left;
}
</style>
